<template>
    <div>
        <el-card>
            <el-table border :data="dataList" :span-method="objectSpanMethod">
                <el-table-column label="标题" align="center" prop="title" />
                <el-table-column label="作者" align="center" prop="author" />
                <el-table-column label="类型" align="center" prop="type">
                    <template v-slot="{ row }">
                        <span v-if="row.type == '1'">文学</span>
                        <span v-if="row.type == '2'">小说</span>
                        <span v-if="row.type == '3'">传记</span>
                    </template>
                </el-table-column>
                <el-table-column label="月销量" align="right" prop="monthSales" />
                <el-table-column label="类型销量" align="center">
                    <template v-slot="{ row }">
                        <span v-if="row.type == '1'" class="typeSales">{{ total.type1 }}</span>
                        <span v-if="row.type == '2'" class="typeSales">{{ total.type2 }}</span>
                        <span v-if="row.type == '3'" class="typeSales">{{ total.type3 }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script  setup>
import { reqGetReportText } from "@/api/mock"
import { ref, onMounted, computed } from 'vue'
const dataList = ref([])
const getText = async () => {
    const result = await reqGetReportText()
    dataList.value = result.data
}
onMounted(() => {
    getText()
})

// 合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    const { num1, num2, num3 } = total.value
    console.log(num1, num2, num3);
    if (columnIndex === 4) { // 限定合并哪一行
        if (row.type === '1') {
            // 如果符合要求则合并
            return {
                rowspan: num1,
                colspan: 1
            }
        } else if (row.type === '2') {
            return {
                rowspan: num2,
                colspan: 1
            }
        } else if (row.type === '3') {
            return {
                rowspan: num3,
                colspan: 1
            }
        }
        else {
            // 不满足条件不合并
            return {
                rowspan: 1,
                colspan: 1
            }
        }
    }

}
// 计算销量总数
const total = computed(() => {
    let type1 = 0
    let type2 = 0
    let type3 = 0
    let num1 = 0
    let num2 = 0
    let num3 = 0
    dataList.value.forEach(item => {
        if (item.type == "1") {
            type1 += item.monthSales
            num1 += 1
        }
        else if (item.type == "2") {
            type2 += item.monthSales
            num2 += 1
        } else if (item.type == "3") {
            type3 += item.monthSales
            num3 += 1
        }
        return {
            type1,
            type2,
            type3,
            num1,
            num2,
            num3
        }
    })
    // console.log(type1, type2, type3, 'type');

    return {
        type1,
        type2,
        type3,
        num1,
        num2,
        num3
    }
})


</script>

<style>

</style>